<template>
  <Modal
    v-model="visible"
    :title="title"
    @on-ok="ok"
    @on-cancel="cancel"
    okText="确定"
    cancelText="清空"
    width="1240"
  >
    <div class="addPatient">
      <div class="mustIn">
        <div class="title">必填选项</div>
        <div class="formBox">
          <Form :model="activityForm" :label-width="193">
            <FormItem class="formItem" label="姓名：">
              <Input class="formInput" v-model="activityForm.name" placeholder="请输入患者姓名" />
            </FormItem>
            <FormItem class="formItem" label="性别：">
              <Select class="formInput" v-model="activityForm.name" placeholder="请选择患者性别">
                <Option v-for="item in ['男','女']" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            <FormItem class="formItem" label="患病类型：">
              <Select class="formInput" v-model="activityForm.name" placeholder="请选择患病类型">
                <Option v-for="item in ['男','女']" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            <FormItem class="formItem" label="患病时间：">
              <DatePicker
                class="formInput"
                v-model="activityForm.date"
                type="date"
                placeholder="选择患病时间："
              ></DatePicker>
            </FormItem>
            <FormItem class="formItem" type="number" label="身高：">
              <Input class="formInput" v-model="activityForm.name" placeholder="请输入患者身高">
                <span slot="append">厘米</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" type="number" label="体重：">
              <Input class="formInput" v-model="activityForm.name" placeholder="请输入患者体重">
                <span slot="append">公斤</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="运动习惯：">
              <Select class="formInput" v-model="activityForm.time" placeholder="请选择运动习惯">
                <Option v-for="item in [3,7]" :value="item" :key="item">{{ item }}天</Option>
              </Select>
            </FormItem>
            <div class="worker">
              <FormItem class="formItem" label="负 责 人 ：">
                <div class="workerList">
                  <div class="workerItem">
                    <img
                      src
                      onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
                    />
                    <p class="name">张一元</p>
                  </div>
                  <Icon type="ios-add-circle-outline" :size="38" color="#D8D8D8" />
                </div>
              </FormItem>
              <FormItem class="formItem" label="参与人员：">
                <div class="workerList">
                  <div class="workerItem">
                    <img
                      src
                      onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
                    />
                    <p class="name">张一元</p>
                  </div>
                  <div class="workerItem">
                    <img
                      src
                      onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
                    />
                    <p class="name">张一元</p>
                  </div>
                  <Icon type="ios-add-circle-outline" :size="38" color="#D8D8D8" />
                </div>
              </FormItem>
            </div>
          </Form>
        </div>
      </div>
      <div class="line"></div>
      <div class="chooseIn">
        <div class="title">健康数据（选填）</div>
        <Form :model="activityForm" :label-width="193">
            <FormItem class="formItem" label="腰围：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者腰围">
                <span slot="append">厘米</span>
              </Input>
            </FormItem>
           <FormItem class="formItem" label="臀围：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者臀围">
                <span slot="append">厘米</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="体脂率：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者体脂率">
                <span slot="append">%</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="心率：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者心率">
                <span slot="append">%</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="糖化血红蛋白：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者糖化血红蛋白">
                <span slot="append">%</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="总胆固醇：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者总胆固醇">
                <span slot="append">%</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="甘油三酯：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者甘油三酯">
                <span slot="append">%</span>
              </Input>
            </FormItem>
            <FormItem class="formItem" label="尿酸：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者尿酸">
                <span slot="append">%</span>
              </Input>
            </FormItem>
             <FormItem class="formItem" label="舒张压（低压）：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者舒张压（低压）">
                <span slot="append">%</span>
              </Input>
            </FormItem>
             <FormItem class="formItem" label="收缩压（高压）：">
              <Input class="formInput" v-model="activityForm.name" type="number" placeholder="请输入患者收缩压（高压）" >
                <span slot="append">%</span>
              </Input>
            </FormItem>
          </Form>

          <div class="title">病史资料（选填）</div>
           <Form :model="activityForm" :label-width="193">
            <FormItem class="formItem" label="治疗方式：">
              <Select class="formInput" v-model="activityForm.name" placeholder="请选择">
                <Option v-for="item in ['男','女']" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            <FormItem class="formItem" label="并发症：">
              <CheckboxGroup v-model="activityForm.arr">
                <Checkbox label="香蕉" border>11111</Checkbox>
                <Checkbox label="苹果" border></Checkbox>
                <Checkbox label="西瓜" border></Checkbox>
                <Checkbox label="香蕉" border></Checkbox>
                <Checkbox label="苹果" border></Checkbox>
                <Checkbox label="西瓜" border></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem class="formItem" label="过往病史：">
              <CheckboxGroup v-model="activityForm.arr">
                <Checkbox label="香蕉" border>11111</Checkbox>
                <Checkbox label="苹果" border></Checkbox>
                <Checkbox label="西瓜" border></Checkbox>
                <Checkbox label="香蕉" border></Checkbox>
                <Checkbox label="苹果" border></Checkbox>
                <Checkbox label="西瓜" border></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem class="formItem" label="糖尿病家族史：">
              <Select class="formInput" v-model="activityForm.time" placeholder="请选择">
                <Option v-for="item in ['有','无']" :value="item" :key="item">{{ item }}天</Option>
              </Select>
            </FormItem>
            <FormItem class="formItem" label="目前症状：">
              <Select class="formInput" v-model="activityForm.time" placeholder="请选择">
                <Option v-for="item in [3,7]" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
          </Form>
          <div class="title">生活习惯（选填）</div>
          <Form :model="activityForm" :label-width="193">
            <FormItem class="formItem" label="是否吸烟：">
              <Select class="formInput" v-model="activityForm.time" placeholder="请选择">
                <Option v-for="item in ['是','否']" :value="item" :key="item">{{ item }}天</Option>
              </Select>
            </FormItem>
            <FormItem class="formItem" label="是否饮酒：">
              <Select class="formInput" v-model="activityForm.time" placeholder="请选择">
                <Option v-for="item in ['是','否']" :value="item" :key="item">{{ item }}天</Option>
              </Select>
            </FormItem>
             <FormItem class="formItem" label="运动习惯：">
              <Select class="formInput" v-model="activityForm.time" placeholder="请选择运动习惯">
                <Option v-for="item in [3,7]" :value="item" :key="item">{{ item }}天</Option>
              </Select>
            </FormItem>
          </Form>
          <div class="title" style="padding-bottom:10px;">备注（选填）</div>
          <div style="padding:0 30px 30px">
            <Input v-model="activityForm.time" type="textarea" :rows="4" placeholder="请输入备注" />
          </div>
      </div>
    </div>
  </Modal>
</template>
<script>
export default {
  name: 'addPatientModel',
  props: {
    activityData: { type: Object },
    show: Boolean,
    title: String
  },
  data () {
    return {
      visible: this.show,
      activityForm: {
        name: '',
        date: '',
        time: '',
        arr: []
      }
    }
  },
  watch: {
    show (newv, oldv) {
      this.visible = newv
    }
  },
  mounted () {},
  methods: {
    ok () {
      this.visible = false
      if (this.isEdited) this.$emit('mdyData', this.data)
      this.$emit('showModel', this.visible)
    },
    cancel () {
      this.visible = false
      this.$emit('showModel', this.visible)
    }
  }
}
</script>
<style lang="less" scoped>
.addPatient {
  box-sizing: border-box;
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: space-between;
  .line {
    width: 1px;
    height: 100%;
    background: #f4f4f4;
  }
  .mustIn,.chooseIn {
    width: 619px;
    box-sizing: border-box;
    height: 100%;
    overflow-y: scroll;
    .title{
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #9F9F9F;
      box-sizing: border-box;
      padding: 23px 30px 30px;
    }
    .formItem {
      margin-bottom: 23px;
      .formInput {
        width: 265px;
      }
    }
    .worker {
      margin: 18px 0 0;
      padding-bottom: 8px;
      .workerList {
        display: flex;
      }
      .workerItem {
        justify-content: center;
        align-items: flex-start;
        display: flex;
        width: 35px;
        flex-wrap: wrap;
        margin-right: 23px;
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          background-color: #fefefe;
          flex-shrink: 0;
        }
        .name {
          height: 18px;
          font-size: 12px;
          color: #9f9f9f;
          line-height: 18px;
          white-space: nowrap;
        }
      }
      .workerItem:last-child {
        margin-right: 0;
      }
    }
  }
  .chooseIn{
    width: 620px;
  }
}
</style>
<style lang="less">

.ivu-form .ivu-form-item-label {
  padding: 10px 0;
}
.ivu-checkbox-wrapper{
  margin-bottom: 8px
}
</style>
